<template>
  <component
    v-if="tag"
    :is="getCompWin(tag)"
    :data="props.comp.propsData"
    :form="fs.form"
    mode="design"
    v-bind="$attrs"
  />
  <div class="bar">
    <el-button type="primary" size="small" plain :icon="CopyDocument" circle @click.stop="emits('copy')" />
    <el-button type="danger" size="small" plain :icon="Delete" circle @click.stop="emits('remove')" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { CopyDocument, Delete } from '@element-plus/icons-vue'
import { useComponent } from './hooks'
import type { DesignItemStruct } from '@/typings'
import { useFlowStore } from '@/stores/flow'

const props = defineProps<{ comp: DesignItemStruct }>()
const emits = defineEmits(['copy', 'remove', 'active'])

const fs = useFlowStore()
const { getCompWin } = useComponent()

const tag = computed(() => {
  return props.comp.config.compTag
})
</script>
<style lang="scss" scoped>
.bar {
  display: none;
  position: absolute;
  right: 15px;
  top: -15px;
  z-index: 100;
}
</style>
